<template>
    <a-menu theme="light" v-model:selectedKeys="current" mode="horizontal" @click="handelClick">
        <a-menu-item :key="item.key" v-for="item, index in menu">
            <template #icon>
                <component :is="item.icon"></component>
            </template>
            {{ item.text }}
        </a-menu-item>
    </a-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { MailOutlined } from '@ant-design/icons-vue';
import { VagueOject } from '@/types/common';
import { useRouterAction } from "@/utils/router";

const { push } = useRouterAction()

withDefaults(defineProps<{
   menu: VagueOject[]
}>(), {
    menu: () => []
})

const handelClick = (item: any) => {
    push(item.key)
}

const current = ref<string[]>(['mail']);
</script>